<!--
 * @Descripttion: --
 * @Author: zhoujj
 * @Date: 2021-07-02 08:56:43
 * @LastEditors: zhoujj
 * @LastEditTime: 2022-05-24 14:56:37
-->
<template>
  <div>
    <FreeForm
      ref="freeForm"
      :requestData="list"
      @getVal="getVal"
      :uploadUrl="uploadUrl"
      :uploadHeader="uploadHeader"
      :selectSlot="content"
    >
    </FreeForm>
    <el-button type="success" @click="submit">成功按钮</el-button>
  </div>
</template>

<script>
    import FreeForm from './components/FreeForm.vue'
    export default {
        components: {
            FreeForm
        },
        data () {
            // id 表单字段的id
            // type 表单字段的类型
            // must 是否必填
            // title 表单字段的中文名（动态表单的字段名称）
            // msg 表单字段的placeholder和必填提示
            // selectData 筛选数据
            // value 绑定的字段
            // content 插槽
            // requestData 后端返回数据
            // uploadUrl 上传文件地址
            // uploadHeader 上传时的请求头
            return {
                content: '插槽数据',
                uploadUrl: 'https://jsonplaceholder.typicode.com/posts/',
                uploadHeader: {
                    Authorization: '1'
                },
                list: [
                    {
                        // 动态json数据
                        id: 1,
                        type: 'Select',
                        must: true,
                        title: '我是下拉框',
                        msg: '请选择',
                        selectData: [
                            { value: 1, label: '我是1' },
                            { value: 2, label: '我是2' }
                        ],
                        value: ''
                    },
                    {
                        id: 2,
                        type: 'Textarea',
                        must: true,
                        title: '我是多行输入框',
                        msg: '请输入',
                        selectData: null,
                        value: ''
                    },
                    {
                        id: 3,
                        type: 'Radio',
                        must: true,
                        title: '单选框',
                        msg: '请选择',
                        selectData: [
                            { value: 1, label: '我是1' },
                            { value: 2, label: '我是2' }
                        ],
                        value: ''
                    },
                    {
                        id: 4,
                        type: 'Input',
                        must: true,
                        title: '输入框',
                        msg: '请输入',
                        selectData: null,
                        value: ''
                    },
                    {
                        id: 5,
                        type: 'DatePicker',
                        must: true,
                        title: '日期',
                        msg: '请选择',
                        selectData: null,
                        value: ''
                    },
                    {
                        id: 9,
                        type: 'DateTimePicker',
                        must: true,
                        title: '日期',
                        msg: '请选择',
                        selectData: null,
                        value: ''
                    },
                    {
                        id: 6,
                        type: 'Upload',
                        must: true,
                        title: '上传',
                        msg: '请上传',
                        selectData: null,
                        value:
                            'blob:http://10.1.0.66:8090/df7c79bc-0e69-4b3c-b09e-918e11eef882'
                    },
                    {
                        id: 7,
                        type: 'MultipleUpload',
                        must: true,
                        title: '多图上传',
                        msg: '请上传',
                        selectData: null,
                        value: [
                            {
                                name: '1.png',
                                url:
                                    'blob:http://10.1.0.66:8090/df7c79bc-0e69-4b3c-b09e-918e11eef882'
                            },
                            {
                                name: '2.png',
                                url:
                                    'blob:http://10.1.0.66:8090/df7c79bc-0e69-4b3c-b09e-918e11eef882'
                            }
                        ]
                    },
                    {
                        id: 8,
                        type: 'Checkbox',
                        must: true,
                        title: '多选框',
                        msg: '请选择',
                        selectData: [
                            { value: 1, label: '我是1' },
                            { value: 2, label: '我是2' }
                        ],
                        value: []
                    }
                ]
            }
        },
        methods: {
            // 获取数据
            getVal (obj) {
                this.list = obj.list
                console.log('回调到父组件的数据', obj)
                console.log('全量提交', this.list)
            },
            submit () {
                this.$refs.freeForm.submit((res) => {
                    if (res) {
                        console.log('执行成功操作')
                    } else {
                        console.log('执行失败操作')
                    }
                })
            }
        }
    }
</script>

<style></style>
